<template>
  <view class="box" @click="goDetail(1)">
    <uni-card>
      <template #title>
        <view class="header-box flex-row-between-center">
          <view class="ass-name">赵芊芊</view>
          <view class="" style="color: red; font-size: 18rpx">{{ status }}</view>
        </view>
      </template>
      <template #actions>
        <view class="actions-box">
          <view class="row1 flex-row-align-center">
            <image src="../../static/woman.jpeg" mode=""></image>
            <view class="info-box">
              <view class="service-time">
                预约时间：
                <uni-dateformat date="2024-10-10 18:00" format="yyyy-MM-dd hh:mm"></uni-dateformat>
              </view>
              <view class="service-name">陪打时长：2小时</view>
              <slot name="ques"></slot>
            </view>
          </view>
          <view class="row2 flex-between">
            <view class="money-box flex-center">
              <view class="">实付:&nbsp;￥</view>

              <view style="font-weight: bold">100</view>
            </view>

            <view class="btn-box flex">
              <button plain v-show="isShowBtn1" type="primary" size="mini">{{ btn1Text }}</button>
              <button plain v-show="isShowBtn2 && index !== 3" type="primary" size="mini"
                style="margin-left: 14px" @click.stop="goCommend(1)">{{ btn2Text }}</button>
              <slot></slot>
            </view>
          </view>
        </view>
      </template>
    </uni-card>
  </view>
</template>

<script setup>
  const props=defineProps({
    status: {
      type: String,
      default: '待支付'
    },
    isShowBtn1: {
      type: Boolean,
      default: false
    },
    btn1Text: {
      type: String,
      default: '删除'
    },
    isShowBtn2: {
      type: Boolean,
      default: true
    },
    btn2Text: {
      type: String,
      default: '评价'
    },
    index: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      required: true,
    },
    popup:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  });
  
  //点击查看订单详情
  function goDetail(id){
    uni.navigateTo({
      url:`/subpkg/order-detail/order-detail?id=${id}`
    })
  }
  
  // 点击对某个订单评价
  function goCommend(id){
    uni.hideTabBar();
    props.popup.open();
  }
</script>

<style scoped lang="scss">
  .box {
    .header-box {
      padding: 20rpx 0;
      border-bottom: 1px solid $uni-bg-color-grey;

      .ass-name {
        border-bottom: 2px solid #00ff7f;
      }
    }

    .actions-box {
      padding-bottom: 20rpx;

      .row1 {
        image {
          width: 130rpx;
          height: 130rpx;
        }

        .info-box {
          margin-left: 16rpx;
        }
      }

      .row2 {
        padding-top: 18rpx;

        .btn-box {}
      }
    }
  }
</style>